<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>编辑商品</title>
    <link rel="stylesheet" href="css/webuploader/webuploader.css" />
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/all.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/shelves-edit.css" />
    <link rel="stylesheet" href="css/add-goods.css" />
    <link rel="stylesheet" href="css/edit-commodity.css" />
</head>
<body>
<div class="head">
         <span onclick="go()">
        <i class="iconfont icon-iconfontjiantou1"></i></span>
    <h1 class="titles">编辑商品</h1>
     
        <span class="achieve" onclick="editCommodity()">完成</span>
 
</div>
<div class="middles">
    <div class="graph">
        <div class="trade">
            <img src="" alt="" id="editPicture">
        </div>
        <div class="cameras">
            <img src="img/xiangji.png" alt="">
            <input type="file" accept="image/*" id="file1" value="" />
        </div>

    </div>
    <div class="headline">
        <span>标题</span>
        <textarea class="describes" placeholder="请输入商品标题" id="editPutawayTitle"></textarea>
    </div>
    <div class="editor">
        <div class="price">
            <span>价格</span>
            <div class="prices">
                <input type="text" placeholder="" class="resetUpwd-inputs" id="editPutawayNowPrice"/>
                <span>元</span>
            </div>
        </div>
        <div class="price">
            <span>库存</span>
            <div class="prices">
                <input type="text" placeholder="" class="resetUpwd-inputs" id="editPutawayStock"/>
                <span>件</span>
            </div>
        </div>
        <div class="price">
            <span>运费</span>
            <div class="prices">
                <input type="text" placeholder="" class="resetUpwd-inputs" id="editPutawayCarriage"/>
                <span>元</span>
            </div>
        </div>
    </div>
    <div class="details">
        <span>商品详情</span>
        <textarea class="describe-one" placeholder="请输入商品详情内容"></textarea>
        <div class="trade">
            <img src="" alt="" id="editProductHtml">
        </div>
       <!-- <a onclick="location.href=''">
            <div class="upload">
                <img src="img/shangchuan.png" alt="">
            </div>
        </a>-->
        <div id="uploader-demo" >
            <!--用来存放item-->
            <div id="fileList" class="uploader-list"></div>
            <div id="filePicker"></div>
        </div>
    </div>
    <div class="solds flex">
        <div>
            <input type="button" class="sold" value="下架" onclick="editCommodity(true)"/>
        </div>
        <div >
            <input type="button" class="sold-one" value="删除"/>
        </div>
    </div>
</div>
</body>
<script src="js/x_rem.js"></script>
<script src="js/jquery.min.js"></script>
<!--引入JS-->
<script type="text/javascript" src="./js/webuplader/webuploader.js"></script>
<script src="js/all.js"></script>
<script src="js/layer/layer.js"></script>
<script>
    $(function () {
        //添加商品啊
        $(".middles").on("change",'#file1', function () {
            var file=document.querySelector("#file1").files;
            html5IMG(file,".trade>img")
        })

        var productId = GetQueryString("productId");
        $.ajax({
            type: "POST",
            url: Url+"/supplier/product/getProductDetail",
            contentType: "application/json;charset=utf-8",
            data : JSON.stringify({
                "productId":productId
            }),
            dataType: "json",
            beforeSend: function(XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("token", token);
                XMLHttpRequest.setRequestHeader("userId", userId);
            },
            error: function(request) {
                alert("Connection error ");
            },
            success: function (data) {
                if (data.message.code == 200) {
                    $("#productId").val(productId);
                    $("#editPicture").attr("src", data.data.picture);
                    $("#editPutawayTitle").val(data.data.title);
                    $("#editPutawayNowPrice").val(data.data.nowPrice);
                    $("#editPutawayStock").val(data.data.stock);
                    $("#editPutawayCarriage").val(data.data.freightPrice);
                    $("#editProductHtml").attr("src", data.data.productHtml);
                } else {
                    console.log(data.message.msg)
                    layer.alert(data.message.msg);
                }
            }
        });

        function html5IMG(file,ele){
            /* var file1 = file[0].size;
             console.log(file1);*/
            var reader = new FileReader();
            // reader.readAsDataURL(file); //判断上传的图片大小
            /*var fileData = file[0].size;*/
            var size = file[0].size;
            //console.log(size);//注意，这里读到的是字节数
            var isAllow = false;
            if (!size) isAllow = false;
            var maxSize = 2048;
            maxSize = maxSize * 1024;   //转化为字节
            isAllow = size <= maxSize;
            if (!isAllow) {
                alert("大小超过2 M，请重新上传");
                return false;
            }
            reader.readAsDataURL(file[0]);
            reader.onload = function (e) {
                //reader.result
                var pic = document.querySelector(ele);
                var pic_add=reader.result;
                pic.setAttribute("src",pic_add);
            }
        }

        function uploader(ele,name){
            // 初始化Web Uploader
            name = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: true,
                // swf文件路径
                swf: './js/webuplader/Uploader.swf',
                // 文件接收服务端。
                server: 'http://webuploader.duapp.com/server/fileupload.php',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: ele,

                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });
            // 当有文件添加进来的时候
            name.on( 'fileQueued', function( file ) {
                var $li = $(
                                '<div id="' + file.id + '" class="file-item thumbnail">' +
                                '<img>' +
                                '</div>'
                        ),
                        $img = $li.find('img');
                var $list=ele;
                // $list为容器jQuery实例
                $list.append( $li );

                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                name.makeThumb( file, function( error, src ) {
                    if ( error ) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }

                    $img.attr( 'src', src );
                }, 100,100 );
            });
            // 文件上传过程中创建进度条实时显示。
            name.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '#'+file.id ),
                        $percent = $li.find('.progress span');

                // 避免重复创建
                if ( !$percent.length ) {
                    $percent = $('<p class="progress"><span></span></p>')
                            .appendTo( $li )
                            .find('span');
                }

                $percent.css( 'width', percentage * 100 + '%' );
            });

// 文件上传成功，给item添加成功class, 用样式标记上传成功。
            name.on( 'uploadSuccess', function( file ) {
                $( '#'+file.id ).addClass('upload-state-done');
            });

// 文件上传失败，显示上传出错。
            name.on( 'uploadError', function( file ) {
                var $li = $( '#'+file.id ),
                        $error = $li.find('div.error');

                // 避免重复创建
                if ( !$error.length ) {
                    $error = $('<div class="error"></div>').appendTo( $li );
                }

                $error.text('上传失败');
            });

// 完成上传完了，成功或者失败，先删除进度条。
            name.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').remove();
            });
        }
        uploader($("#filePicker"),uploader);
        /* // 初始化Web Uploader
         var uploader = WebUploader.create({
         // 选完文件后，是否自动上传。
         auto: true,
         // swf文件路径
         swf: './js/webuplader/Uploader.swf',
         // 文件接收服务端。
         server: 'http://webuploader.duapp.com/server/fileupload.php',
         // 选择文件的按钮。可选。
         // 内部根据当前运行是创建，可能是input元素，也可能是flash.
         pick: '#filePicker',

         // 只允许选择图片文件。
         accept: {
         title: 'Images',
         extensions: 'gif,jpg,jpeg,bmp,png',
         mimeTypes: 'image/!*'
         }
         });
         // 当有文件添加进来的时候
         uploader.on( 'fileQueued', function( file ) {
         var $li = $(
         '<div id="' + file.id + '" class="file-item thumbnail">' +
         '<img>' +
         '</div>'
         ),
         $img = $li.find('img');
         var $list=$("#uploader-demo");
         // $list为容器jQuery实例
         $list.append( $li );

         // 创建缩略图
         // 如果为非图片文件，可以不用调用此方法。
         // thumbnailWidth x thumbnailHeight 为 100 x 100
         uploader.makeThumb( file, function( error, src ) {
         if ( error ) {
         $img.replaceWith('<span>不能预览</span>');
         return;
         }

         $img.attr( 'src', src );
         }, 100,100 );
         });
         // 文件上传过程中创建进度条实时显示。
         uploader.on( 'uploadProgress', function( file, percentage ) {
         var $li = $( '#'+file.id ),
         $percent = $li.find('.progress span');

         // 避免重复创建
         if ( !$percent.length ) {
         $percent = $('<p class="progress"><span></span></p>')
         .appendTo( $li )
         .find('span');
         }

         $percent.css( 'width', percentage * 100 + '%' );
         });

         // 文件上传成功，给item添加成功class, 用样式标记上传成功。
         uploader.on( 'uploadSuccess', function( file ) {
         $( '#'+file.id ).addClass('upload-state-done');
         });

         // 文件上传失败，显示上传出错。
         uploader.on( 'uploadError', function( file ) {
         var $li = $( '#'+file.id ),
         $error = $li.find('div.error');

         // 避免重复创建
         if ( !$error.length ) {
         $error = $('<div class="error"></div>').appendTo( $li );
         }

         $error.text('上传失败');
         });

         // 完成上传完了，成功或者失败，先删除进度条。
         uploader.on( 'uploadComplete', function( file ) {
         $( '#'+file.id ).find('.progress').remove();
         });*/
    })
    
    var status = 0;   //0商品上架   1商品下架   暂时默认0；
    
    
    var editCommodity=(parameter)=>{
 		
 		status = parameter ? 1:0;    // 用三目为status赋值   parameter为true的话statue的值为1   否则为0  
 		console.log(status);
 
 
    	var data=JSON.stringify({
    		"id":GetQueryString("productId"),
    		"title": $("#editPutawayTitle").val(),
    		"nowPrice":$("#editPutawayNowPrice").val(),
    		"stock":$("#editPutawayStock").val(),
    		"freightPrice":$("#editPutawayCarriage").val(),
//    		"productHtml":$("#editPutawayDetails").val(),
    		"status":status
    	});
    	
    	var success=(data)=>{
            if(data.message.code == 200) {
                location.href = './shop-page.html';
            }else{
                popup(data.message.msg);
            }
    	}
  	    Hajax("post","/supplier/product/editProduct",data,success);
    }

</script>
</html>